
<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>
      Segments
    </ion-title>
  </ion-navbar>

  <ion-toolbar [color]="isAndroid ? 'primary' : 'light'" no-border-top>
    <ion-segment [(ngModel)]="pet" [color]="isAndroid ? 'light' : 'primary'">
      <ion-segment-button value="puppies">
        Puppies
      </ion-segment-button>
      <ion-segment-button value="kittens">
        Kittens
      </ion-segment-button>
      <ion-segment-button value="ducklings">
        Ducklings
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'puppies'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-puppy-1.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-puppy-2.jpg">
        </ion-thumbnail>
        <h2>Oscar</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-puppy-4.jpg">
        </ion-thumbnail>
        <h2>Zoey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-puppy-3.jpg">
        </ion-thumbnail>
        <h2>Otto</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'kittens'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-kitten-1.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-kitten-3.jpg">
        </ion-thumbnail>
        <h2>Milo</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-kitten-4.jpg">
        </ion-thumbnail>
        <h2>Bandit</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-kitten-2.jpg">
        </ion-thumbnail>
        <h2>Nala</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'ducklings'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-duckling-1.jpg">
        </ion-thumbnail>
        <h2>Daffy</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-duckling-2.jpg">
        </ion-thumbnail>
        <h2>Huey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-duckling-3.jpg">
        </ion-thumbnail>
        <h2>Dewey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/img/thumbnail-duckling-4.jpg">
        </ion-thumbnail>
        <h2>Louie</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>
